<template>
	<view class="">
		<view class="content" @click="onClick()">
			<view class="">
				<view class="">
					<view class="flex_btw" v-if="$slots.title">
						<template slot="title">
							<slot name="title"></slot>
						</template>
						<view class='icon' :style="[{transform:isOpen? iconRotate : ''}]">
							<u-icon name="arrow-down" color="#999" size="28rpx"></u-icon>
						</view>
					</view>
					<view class="flex_btw" v-else>
						<view class="title">{{title}}</view>
						<view class='icon' :style="[{transform:isOpen? iconRotate : ''}]">
							<u-icon name="arrow-down" color="#999" size="28rpx"></u-icon>
						</view>
					</view>
				</view>
				<view class="mtb26">
					<view class="cut_line" v-if="isBorder || isBorder==undefined"></view>
				</view>
				<view class="v-collapse" :style="[{ height: isOpen ? collapseHeight + 'px' : '0' }]"
					@click.stop="clickContent()">
					<view class="u-collapse-content" id="ida">
						<view class="" v-if="$slots.cont">
							<template slot="cont">
								<slot name="cont"></slot>
							</template>
						</view>
						<view class="ml80 cont" v-else>
							<view class="">{{content}}</view>
						</view>
						<view class="mtb26">
							<view class="cut_line" v-if="isBorder || isBorder==undefined"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/*
	 * zh-collapse 折叠面板
	 * @property {String}	title		 面板标题
	 * @property {String}	content		 面板展开内容
	 */
	export default {
		props: {
			title: {
				typeOf: String,
				default: ''
			},
			content: {
				typeOf: String,
				default: ''
			},
		},
		components: {},
		data() {
			return {
				isOpen: false, //是否展开面板
				isBorder: true, //是否显示边框
				iconRotate: '', //旋转右侧图标
				collapseHeight: 0, //获取展开高度
			}
		},
		created() {
			this.collapse = this.getCollapse()

		},
		mounted() {
			if (!this.collapse) return
			if (this.collapse.childrens.indexOf(this) === -1) {
				this.collapse.childrens.push(this)
			}

			this.$nextTick(() => {
				this.collapse.childrens.forEach((item, index) => {
					// console.log(index,item);
					if (item.isOpen) {
						this.iconRotate = 'rotate(180deg)'
						this.collapse.onChange()
						this.queryRect();
					}
				})
			})
		},
		methods: {
			onClick() { //点击展开面板
				this.isOpen = !this.isOpen
				if (this.isOpen && this.collapse) {
					this.collapse.setAccordion(this)
				}
				if (this.isOpen) {
					this.iconRotate = 'rotate(180deg)'
				} else {
					this.iconRotate = ''
				}
				this.collapse.onChange()
				this.queryRect();
			},

			queryRect(e) { // 查询内容高度
				this.$uGetRect('#ida').then(res => {
					this.collapseHeight = res.height;
				})
			},
			$uGetRect(selector, all) { //获取布局节点高度
				return new Promise(resolve => {
					uni.createSelectorQuery().
					in(this)[all ? 'selectAll' : 'select'](selector)
						.boundingClientRect(rect => {
							if (all && Array.isArray(rect) && rect.length) {
								resolve(rect)
							}
							if (!all && rect) {
								resolve(rect)
							}
						})
						.exec()
				})
			},
			toJSON() {},

			/**
			 * 获取父元素实例
			 */
			getCollapse(name = 'zhCollapse') {
				let parent = this.$parent;
				let parentName = parent.$options.name;
				while (parentName !== name) {
					parent = parent.$parent;
					if (!parent) return false;
					parentName = parent.$options.name;
				}
				return parent;
			},
			clickContent() { //点击展开内容事件
				let str = ''
				this.collapse.childrens.forEach((item, index) => {
					if (item === this) {
						str = index
					}
				})
				this.$emit('clickContent', str)
			}
		},
		computed: {

		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 24upx 24upx 0 24upx;
		background-color: #fff;
		border: 12upx;

		.title {
			color: #666;
			font-weight: 500;
			font-size: 24upx;
		}

		.icon {
			transition: all 0.4s;
		}

		.titlea {
			color: #999;
			font-size: 24upx;
		}

		.cont {
			color: #909193;
			font-size: 28upx;
		}

	}

	.cut_line {
		height: 1upx;
		background: #EBEBEB;
	}

	.mtb24 {
		margin: 24upx 0;
	}

	.mtb26 {
		margin: 26upx 0;
	}

	.mtb30 {
		margin: 30upx 0;
	}

	.ml80 {
		margin-left: 80upx;
	}

	.flex {
		display: flex;
	}

	.flex1 {
		flex: 1;
	}

	.flex_btw {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.v-collapse {
		height: 0rpx;
		overflow: hidden;
		transition: all 0.4s;

		.u-collapse-content {
			overflow: hidden;
		}
	}
</style>